<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf - 8">
        <meta name = "viewport" content="
        initial-scale= 1.0,maximum-scale=1.0,user-scalable=no">
        <title>

        </title>
        <script src="C:/Users/24098/Desktop/978-7-302-48199-7《HTML5 App应用开发教程》教辅/配套资源包/chapter06/scripts/jquery-3.1.1.min.js">
        </script>
<style>
    #mydiv{
        background-color: yellow;
        width:50px;
        height:50px;
        margin-bottom: 10px;
    }
    input[name = 'ratio']{
        width:30px;
        margin-bottom: 10px;
    }
    #btnLarge,#btnSmall{
        width:60px;
        height:30px;
        font-size:20px;
    }
</style>
</head>
    <body>
        
            <div id="mydiv">
            </div>
            <input type="radio" value = "1.2" name="ratio" checked/>1.2
            <input type="radio" value = "1.5" name="ratio"/>1.5<br/>
        
            <input type= "button" value = "+" id ="btnLarge"/>
            <input type= "button" value ="-" id = "btnSmall"/>

        
    

        <script>
            
            $(function(){
                var $div = $("#mydiv");
                $("#btnLarge").click(function(){
                   changeDiv(true);
                });
                $("#btnSmall").click(function(){
                   changeDiv(false);
                });
                function changeDiv(large){
                    var ratio = $("input:checked").val();
                    var width = $div.css("width");
                    var height = $div.css("height");
                    if(large){
                        $div.css({
                            "width":parseInt(width)*ratio +"px",
                            "height":parseInt(height)*ratio + "px"
                        });
                    }
                    else{
                        $div.css({
                            "width":parseInt(width)/ratio + "px",
                            "height":parseInt(height)/ratio +"px"
                        });
                    }
                }
               
               

            });
           
        </script>

    </body>
</html>